<!--滚动广告-->
<div class="container">
    <div class="col-lg-12" style="float: none; margin: 0 auto;">
    <div class="banner">
        <ul>
            <li ng-repeat="source in  bannerSources"><img ng-src="{{source}}" class="img-responsive"/>
            </li>
        </ul>
        <div class="donate-intro">
            <div class="donate-total donate-intro-slide">
                <li ng-repeat="donation in latestDonations"><span>{{donation.name}} </span>于{{donation.start_time}}捐赠了 <span>{{donation.total_fee}}</span>元  </li>
            </div>
            <div style="position: absolute; bottom:8px; left: 50%; margin-left: -265px;">
                <span class="donate-total">历史善款总额：<span>{{totalDonation}}</span> 元</span>
                <span class="donate-total">本年善款总额：<span>{{yearDonation}}</span> 元</span>
                <span class="donate-total">本月善款总额：<span>{{monthDonation}}</span> 元</span>
            </div>
        </div>
    </div>
</div>

<!--内容区-->
<div class="container">
    <div class="col-lg-12" style="float: none; margin: 0 auto;">
        <div class="col-lg-3">

            <a href="" ng-click="donation()">
                <div class="" style="margin: 5px">
                    <img src="../images/donate_icon.png" class="img-responsive">
                </div>
            </a>

            <div class="info-block">
                <div class="info-block-title">
                    <span style="line-height: 18px"><img src="../images/note_icon.png"> </span><span style="line-height: 18px">慈善公益网公共账号</span>
                </div>
                <div class="info-block-content">
                    <p>开户行: 中国邮政储蓄银行北京顺义区石园支行</p>
                    <p>账户名: 北京市顺义区社会福利慈善协会</p>
                    <p>账号: 1003533407160010002</p>
                    <p>捐款后,请将您的信息发送到至北京顺义慈善公益网邮箱: shunyics@126.com
                    <p>联系电话: 010-89447801 </p>

                </div>
                <div class="info-block-content-pay">
                    <span style="font-size: 16px"> 支持:</span>
                    <img src="../images/weixin_icon.png" style="margin-left: 10px">
                    <img src="../images/zhifubao_icon.png" style="margin-left: 18px">
                </div>
            </div>

            <div class="notice-block">

                <div class="info-block-title">
                    <img src="../images/notice_icon.png"> <span>慈善协会大事记</span>
                </div>
                <div class="slide-container info-block-content">
                    <ul class="slide-list" >
                        <li ng-repeat="event in eventList track by $index">
                            <div>
                                <div>{{event.date}}</div>
                                <div>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{event.content}}
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>

        </div>
        <div class="col-lg-5">
            <div class="col-lg-12 sy-charity-gray-bottom-line">
                <span class=" media-list-tab">
                    媒体报道
                </span>
                <span style="float:right;margin-top:15px"><a href="/#/mediaList/10">更多>></a></span>

            </div>
            <div class="sy-charity-gray-bottom-line sy-charity-article-container row" style="padding: 10px 0;"
                 ng-repeat="media in articles ">
                <a href="/#/mediaDetail/{{media.id}}" target="_blank">
                    <div ng-if="$index == 0">

                        <div class="media-list-6 col-md-6">
                            <img class="img-responsive" height="" ng-src="{{media.cover_url}}"
                                 ng-if="!!media.cover_url"/>
                        </div>
                        <div class="col-md-6 media-list-6">
                            <div class="media-list-title">
                                {{media.title}}
                            </div>

                            <div class="media-list-desc-6">
                                &nbsp;&nbsp;&nbsp;&nbsp;{{media.desc}}
                            </div>

                            <div class="media-list-time-6">
                                {{media.update_at}}更新
                            </div>

                        </div>
                    </div>

                    <div ng-if="$index != 0">
                        <div class="col-md-4 media-list-3">
                            <img class="img-responsive" height="" ng-src="{{media.cover_url}}"
                                 ng-if="!!media.cover_url"/>
                        </div>
                        <div class="col-md-8 media-list-9">
                            <div class="media-list-title">
                                {{media.title}}
                            </div>

                            <div class="media-list-desc-9" style="">
                                &nbsp;&nbsp;&nbsp;&nbsp;{{media.desc}}
                            </div>

                            <div class="media-list-time-9">
                                {{media.update_at}}更新
                            </div>

                        </div>

                    </div>
                </a>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="sy-charity-gray-bottom-line">
                <span class="sy-charity-panel-title">视频</span>
                <span style="float:right;margin-top:15px"><a href="/#/mediaList/9">更多>></a></span>
            </div>

            <div ng-repeat="video in videoList track by $index" >
                <div style="float:left;margin-right:10px" ng-if="$index === 0">
                    <a target="_blank" href="{{video.video_url}}">
                        <img width="310px" ng-src="{{video.cover_url}}">
                    
                    <div style="color: #666; width:310px;height:30px;margin-top:5px"><img width="20px" src="images/icon-play.png" style="margin-right:5px">{{video.title}}</div>
                    </a>
                </div>

                <div style="float:left" ng-if="$index != 0 && $index < 7">
                    <div ng-if="$even" style="margin-top:10px;padding-bottom:10px">
                        <a target="_blank" href="{{video.video_url}}">
                            <img width="148px" height="80px" ng-src="{{video.cover_url}}">
                        
                        <div style="color:#666; width:148px;height:30px;margin-top:5px"><img width="20px" src="images/icon-play.png" style="margin-right:5px">{{video.title}}</div>
                        </a>
                    </div>
                    <div ng-if="$odd" style="margin-top:10px;margin-right:10px;padding-bottom:10px">
                        <a target="_blank" href="{{video.video_url}}">
                            <img width="148px" height="80px" ng-src="{{video.cover_url}}">
                        
                        <div style="color:#666; width:148px;height:30px;margin-top:5px"><img width="20px" src="images/icon-play.png" style="margin-right:5px">{{video.title}}</div>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var doscroll = function(obj){
            var $parent = $(obj);
            var $first = $parent.find('li:first');
            var height = $first.height();
            $first.animate({
                height: 0   //或者改成： marginTop: -height + 'px'
            }, 500, function() {// 动画结束后，把它插到最后，形成无缝
                $first.css('height', height).appendTo($parent);
            });
        };
        setInterval(function(){
            doscroll('.slide-list');
            doscroll('.donate-intro-slide');
        }, 3000);

    });

</script>